<template>
	<view class="fixed">
		<view @click="toTop" v-show="topShow" class="me-to-top">
			<view class="icon"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		onReady,
		onPageScroll
	} from '@dcloudio/uni-app';
	const props = defineProps({
		rollValue: {
			type: Number,
			default: 0
		}
	})
	const emit = defineEmits(["goTop"])
	const topShow = computed(() => props.rollValue > 150);

	function toTop() {
		emit("goTop")
	}
</script>

<style lang="scss" scoped>
	.fixed {
		.me-to-top {
			background-color: #fff;
			position: fixed;
			right: 75px;
			bottom: 150px;
			width: 40px;
			height: 40px;
			border-radius: 20px;
			cursor: pointer;
			transition: .3s;
			// box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
			z-index: 5;

			i {
				color: #00d1b2;
				display: block;
				line-height: 40px;
				text-align: center;
				font-size: 18px;
			}

			.icon {
				// background-color: #00d1b2;
				background-color: rgba(0, 209, 178, 0.3);
				display: block;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				text-align: center;
			}
		}
	}
</style>